body {
  background-image: url(../images/bg.jpg);

  .info {
    height: 75px;
    border: 1px solid #cccccc;
    border-image-width: 51px 38px 21px 132px;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 21 132;
  }

  .layout {
    min-width: 1024px;
    max-width: 1920px;
    min-height: 780px;
    padding: 88px 20px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    display: flex;

    .active {
      color: red !important;
    }

    .setting {
      background-color: skyblue;
      color: #ccc !important;
      border-radius: 5px;
    }

    .column {
      flex: 3;
    }

    .column:nth-child(1) {
      display: flex;
      flex-direction: column;

      .left-column:nth-child(1) {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;

        ul {
          display: flex;
          flex: 1;
          justify-content: space-between;
          padding: 0 25px 10px 25px;

          li {
            display: flex;
            flex: 1;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            h4 {
              color: #ffffff;
              font-size: 22px;
              font-weight: 700;
              margin-bottom: 5px;
            }

            span {
              color: #4791ed;
              font-size: 12px;
            }
          }
        }
      }

      .left-column:nth-child(2) {
        height: 420px;
        margin-bottom: 15px;

        .taps {
          display: flex;
          justify-content: center;
          padding: 15px;

          .fault {
            border-right: 1px dashed #00ebea;

            a {
              padding-right: 20px;
              color: #ccc;
            }
          }

          .unusual {
            a {
              padding-left: 20px;
              color: #ccc;
            }
          }
        }

        .details {
          display: flex;
          height: 40px;
          background-color: rgba(255, 255, 255, 0.1);
          align-items: center;
          margin: 0 20px;

          span {
            flex: 1;
            color: #346fbc;
            text-align: center;
            font-size: 14px;
          }
        }

        @keyframes move {
          from {}

          to {
            transform: translateY(-50%);
          }
        }

        .fault-list {
          overflow: hidden;

          ul:hover {
            animation-play-state: paused;
          }

          ul {
            animation: move 15s linear infinite;
            height: 14.8rem;

            li {
              display: flex;
              position: relative;
              margin-bottom: 15px;

              .icon-dot {
                position: absolute;
                left: 18px;
              }

              span {
                text-align: center;
                flex: 1;
                font-size: 14px;
                font-weight: 700;
                color: #346fbc;
                white-space: nowrap;
                /*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/
                overflow: hidden;
                /*超出部分隐藏*/
                text-overflow: ellipsis;
                /*隐藏部分以省略号代替*/
              }
            }
          }
        }
      }

      .left-column:nth-child(3) {
        height: 235px;
        padding: 20px;

        h4 {
          // padding: 20px 0 0 20px;
          color: #ccc;
        }

        .station {
          display: flex;
          justify-content: space-between;

          .station-map {
            flex: 3;
            height: 10rem;
          }

          .station-data {
            flex: 1;
            display: flex;
            padding: 20px 10px;
            flex-direction: column;
            background-image: url(../images/rect.png);
            margin-left: 10px;

            div:nth-child(1) {
              margin-bottom: 15px;
            }

            span {
              text-align: left;
              font-size: 14px;
              color: #16376c;
            }

            h2 {
              font-size: 30px;
              color: #cccccc;
              font-weight: 700;
            }
          }
        }
      }
    }

    .column:nth-child(2) {
      flex: 4;
      margin: 3px 20px 0;
      display: flex;
      flex-direction: column;

      .center-column:nth-child(1) {
        flex: 6;
        display: flex;
        flex-direction: column;

        h3 {
          height: 25px;
          line-height: 23px;

          .icon-cube {
            color: skyblue;
            font-size: 14px;
            font-weight: 700;
          }

          .map-title {
            color: #ccc;
            font-size: 14px;
            font-weight: 700;
          }
        }

        .map {
          flex: 1;
          // background: rgba(199, 237, 204, 0.5);
          margin-bottom: 15px;
        }
      }

      .center-column:nth-child(2) {
        height: 202px;
        padding: 20px;

        h4 {
          color: #ccc;
        }

        .users {
          display: flex;

          .users-map {
            flex: 3;
          }

          .users-data {
            display: flex;
            flex: 1;
            padding: 10px 10px;
            flex-direction: column;
            background-image: url(../images/rect.png);

            div:nth-child(1) {
              margin-bottom: 15px;
            }

            span {
              color: #16376c;
            }

            h2 {
              color: #ccc;
            }
          }
        }
      }
    }

    .column:nth-child(3) {
      .right-column:nth-child(1) {
        height: 110px;
        margin-bottom: 15px;
        padding: 10px;
        display: flex;
        flex-direction: column;

        .indent-title {
          display: flex;
          flex: 1;

          a:nth-child(-n + 3) {
            border-right: 1px solid skyblue;
          }

          // a:hover {
          //   color: skyblue;
          // }

          a {
            flex: 1;
            display: inline-block;
            text-align: center;
            color: #cccccc;
            font-size: 14px;
            line-height: 22px;
          }
        }

        .indent-data {
          flex: 3;
          display: flex;
          padding: 10px 0 0 25px;

          div {
            flex: 1;

            h4 {
              color: #cccccc;
              font-size: 20px;
            }

            span {
              color: #1d6fbc;
              font-size: 14px;
            }
          }
        }
      }

      .right-column:nth-child(2) {
        height: 175px;
        margin-bottom: 15px;
        padding: 15px;
        display: flex;
        flex-direction: column;

        .market-tilte {
          display: flex;

          .statistics {
            // flex: 1;
            color: #ccc;
            // padding-left: 10px;
            padding-right: 10px;
            border-right: 1px solid skyblue;
          }

          .time {
            flex: 2;
            margin-left: 10px;

            a {
              // flex: 1;
              padding: 5px;
              color: skyblue;
              margin-right: 10px;
            }
          }
        }

        .liner {
          flex: 1;
        }
      }

      .right-column:nth-child(3) {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;

        .info {
          flex: 1;
          height: 162px;
          padding: 20px;
        }

        .info:nth-child(1) {
          margin-right: 15px;

          h4 {
            color: #ccc;
            font-size: 14px;
            margin-bottom: 5px;
          }

          .ditch {
            display: flex;
            flex-wrap: wrap;

            div {
              flex: 50%;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .ditch-title {
                font-size: 24px;
                color: #fefefe;
                font-weight: 700;

                i {
                  font-size: 20px;
                  margin-left: 3px;
                  // font-weight: 700;
                }
              }

              .ditch-plane {
                color: #3369b1;

                i {
                  font-size: 14px;
                }
              }

              span {
                flex: 1;
              }
            }

            div:nth-child(-n + 2) {
              margin-bottom: 3px;
            }
          }
        }

        .info:nth-child(2) {
          display: flex;
          flex-direction: column;
          position: relative;

          h5 {
            color: skyblue;
            font-size: 12px;
          }

          .shuju {
            position: absolute;
            top: 44%;
            left: 50%;
            display: inline-block;
            transform: translate(-50%, -30%);
            font-size: 20px;
            color: #ccc;
          }

          .bridge {
            flex: 1;

          }


          .bridge-data {
            flex: 1;
            display: flex;
            margin-top: 10px;

            div {
              flex: 1;
              display: flex;
              flex-direction: column;

              span {
                color: #ccc;
                font-weight: 900;
              }

              .icon-dot {
                margin-top: 8px;
                color: #3a79ca;
                font-size: 12px;
              }
            }
          }
        }
      }

      .right-column:nth-child(4) {
        height: 200px;
        display: flex;

        div {
          flex: 1;
          padding: 15px;

          h5 {
            color: #1f4172;
            margin-bottom: 5px;
          }
        }

        div:nth-child(1) {
          display: flex;
          flex-direction: column;

          span {
            flex: 1;
            color: skyblue;
            display: flex;
            // justify-content: center;
            align-items: center;

            i {
              font-size: 24px;
              color: red;
            }
          }
        }
      }
    }
  }
}